React application build example from scratch. Watch commit messages and diffs for step by step guide!
Quick intro on Medium: https://goo.gl/Q8K35X
To get ready for installing scripts for your application you need to install necessary software onto your computer.
- install NodeJS. How to: https://nodejs.org/en/download/
- install your favourite code editor a.k.a. IDE i.e. WebStorm, PHPStorm, Atom, VisualStudio Code or any other.
- install Xcode from AppStore. It includes necessary toolset for developers (we need Git for that)
- install Git, so you'll be able to use GitHub (or other alternatives) as well as have Unix-like Terminal called "GitBash". Download from: https://git-scm.com/download/win
There always is some preparation work to do before starting the actual application development. This guide is being built based on "create-react-app" setup (https://github.com/facebookincubator/create-react-app).
The way I've initialise this project is running these commands on your MacOS terminal (or GitBash on Windows):
- install "create-react-app" script globally, so you'll be able to init as many apps as you want without needing to install it again and again.
npm install -g create-react-app
- Go to your Web projects folder and initialise your first application (I've named my app "create-your-react-app"). The way I initialise it:
create-react-app create-your-react-app
- Go to the freshly created project directory with "cd" command and your folder name, start the application by running "npm start":
cd create-your-react-app/
npm start
Boom, you've got your blank application opened on the browser, meanwhile Terminal (or GitBash) has the scripts running and watching code changes which you will be introducing so it will try to recompile and refresh it automatically in your browser window. Remember: you will have to open your Terminal (or GitBash) everytime you get back to application development and run "npm start" command from within the project directory!
Open your project directory with a chose code editor (IDE) and start changing the code to see what happens every time you make a change. You may start changing some text on App.js for a start and follow commits history for step by step code changes of this app here: https://github.com/g86/create-your-react-app/commits/master
In this repository I am building sample ReactJS application and you may look at commits to see how things are done step by step. I'll try to keep it as simple as possible.
Once you have built something and have a question "what do I do to host it somewhere?". You need to run the following command to create a production ready bundle:
npm run build
When it's done - take all files from build folder and upload them to your hosting server (it may even be Apache).
You can see this application live: https://goo.gl/NMwMkW
- HTML: https://www.w3schools.com/html/
- CSS: https://www.w3schools.com/css/
- JavaScript: https://www.w3schools.com/js/
- ReactJS: https://facebook.github.io/react/docs/hello-world.html
The latest projects use the next version of JavaScript called "ES6" a.k.a. "ES2015". You may find it useful to read about the features and syntax updates regarding ES6 over here: https://github.com/lukehoban/es6features#arrows
I also recommend to read https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html to understand what "create-react-app" is. By creating this project I assume that you already know what is HTML, CSS and have some understanding of JavaScript as well as basics of programming.