Okay, so I have explained to you the reasons behind this journey, why React and what is so special about it. So now in order to start everything I had to set up the environment.

I will show you in this post the tools I used and feel free to follow if you want to have your environment set up easily.

Part 1: basic tools

First of all, the choice of the editor.
I have always used brackets for writing my Javascript projects. But since I discovered visual studio code I fell in love with it and decided to switch.

Some amazing features offered by this tool are :

  1. Peek view
  2. Intellisense(Love it)
  3. Integrated terminal
  4. Built-in Git
  5. Task Runner
  6. Built-in Node.js Debugger

And all this comes for free on their official website where you can download it.

Visual studio preview
Little preview of the final result

Next, I needed to install two things, Node.js and Yarn.

I went to this link and downloaded the first.

Node is basically Javascript on the server, and I will use it to create a production web server. Also notice that this installation was necessary since I will use tools that take advantage of it, like webpack.

Node installation wizard

I just followed the wizard here, in case you are following this and you have got problems you can try to get help here.

 

To verify that node was correctly installed I used(Windows environment) :

node –version

When you install node, you also get npm(node package manager). This allows us to install various components like Yarn. I ran the npm -v to check for its installation

npm -v

Now its time to install yarn,  I ran the :

npm install -g yarn

command and successfully installed it.

 

Once the installation was done, I checked once again using the :

yarn -v

command that everything was okay.

 

And there, I was almost ready to start coding in React.

Okay so now the steps to follow were very easy, basically what I did  was :

  1. Create a folder for my project, in my case the folder was at : Desktop/react-projects/thecoderswag
  2. Open the folder with visual studio code

Now, when you create a web app you need some way to serve it and visualize it. In my case I used live-server. Just typed in the command prompt:

npm install -g live-server

 

Always remember to verify the installation using :

live-server -v

 

Now, to see our first page, we need to make four other little steps(I know this is a long process).

  1. Create a folder inside your visual studio project, name it as you prefer(I called this: public in my case). Here we will put the content we want to serve as part of our page using live-server
  2. In order to know if everything is okay with the server, put some content inside this folder, like an index.html file. This will be the file you will see at the end of the process.
  3. Then we will need to move inside the folder we created for the project using the prompt.

So in my case :

cd Desktop/react-projects/thecoderswag

At this point, We just need to type in: live-server *name of the folder we created*
For me:

Desktop/react-projects/thecoderswag> live-server public

 

If everything went fine, you should see your browser opening at the localhost:8080 address automatically displaying the index.html file content. Please also notice that every modification you will make to the file will be immediately reflected to the page unless there are errors in the code. 

Okay, so this was the environment setup for React. In the next post, I will show you the first piece of code I have written and an introduction to use, write, and compile a JSX file using Babel.

 

Thank you for reading, stay tuned.

Be positive, happy learning.

 

 

 

 

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here