Create a ReactJS App from Scratch
React is a JavaScript library created by Facebook and Instagram that helps helps developers and large applications with constantly changing data within their application. You can read more about React here.
Creating an application from scratch for React may seem overwhelming at first, especially if you don’t know what that entails. We are going to be running your personal React application using node.js and starting a local server that will run your code. This may sound complicated (or not), but it’s really just a simple matter of downloading a few things and we should be good to go.
First, we will need to download node. Node will give us something called “npm” which is the node package manager. The manager will make installing other tools that we need much, much easier. Next, you’ll need something called the React Developer Tools extension for Chrome. While developing an application, you should be able to dissect your app by looking at the React components you have created. This will probably make more sense once we have an application running. Finally, React is written using a language called JSX, which is basically regular JavaScript combined with HTML. In your text editor cannot parse through JSX, so you must download Babel. This may vary for text editors, so I would just Google it.
how to download babel [enter text editor name]
The way to do this in sublime (my text editor) is just to type cmd+shift+p, and type Babel. Now, in the text editor we need to make sure that Babel is the setting for every file. In the bottom right corner, you should see:
but we want:
The way to change this in every JS file is to go to View -> Syntax -> Open All With Current Extension As -> Babel -> Javascript (Babel).
Doing this will open every JS file with the Babel syntax highlighter. Now we have our text editor ready and we are ready to get started with our React application. Let’s get started with the Terminal. We will be using git to get the starter files for React. Don’t worry too much about what each of the files contains just yet. In your Terminal, we will make a directory for React projects and create a folder for your first one. Type:
$ mkdir React
Do not include the $, this is there to indicate that the typing will occur within Terminal. The command just typed created a folder called React.
$ cd React
$ git clone https://github.com/hershalb/React-Starter-Kit.git firstReact
$ cd firstReact
$ npm install
$ npm start
Doing this will put a React base of code that you can see on my Github here. Remember “npm” from when we installed it before? We’re using it now to download all the react files and other helpful files we may need. This may take up to 5 mins. so be patient. After this is completed, the “npm start” line starts the server that we need at http://localhost:8080/. It should look like this:
If you open the firstReact folder in a text editor you will see a list of files. Under the “public” folder, you should see an index.html file and styles.css file. These are pretty standard for web applications, but in React applications the index.html is usually left untouched. The styles.css file can just be used as normal to style the components you create. Opening the “app” folder and opening App.js, you should see your first component. You can change the words in the h1 tags to your own liking, save, and see the results displayed immediately in the browser. This is just the beginning of the road for React applications and there is much more to learn/do, but this is a great start. You can really begin your React journey here, and go throughout Guide section to create more components. Hopefully this quickstart painlessly got you through the tedious parts of starting a React application.
