By Ayushya Amitabh
A very brief (30-ish minutes) introduction to React.
Source code to go along with Bolt React Workshop | Deck
If you already know the concepts but need a refresher on where to start
# Start by installing Node.js / NPM
https://nodejs.org/en/download/
# NPM is what we really need,
# it comes bundled with Node.js# Check NPM installed properly
$ npm -v
# Should print out version, if not
# try restarting your terminal /
# command line first, then troubleshoot
# with Google's help# Start your project
$ npx create-react-app your-project-name
# This may take a while depending on
# internet speed# Go to your project folder
$ cd your-project-name
# Start your local server
$ npm start
# Server will automatically refresh
# your UI when you update source codeDocumentation is a developer's best friend, here's some useful reading to get going quick
| Topic | Link | Comments |
|---|---|---|
| React Installation & Getting Started | https://reactjs.org/docs/create-a-new-react-app.html | The most common (and easiest way) for beginners is to use React's Create React App Method |
| React's Documentation | https://reactjs.org/docs/hello-world.html | Learn about Component, State Management, Props & More - this is a great starting point |
| React Router DOM | https://reactrouter.com/web/guides/quick-start | This will help you with route management for a Single Page Application (SPA), eg: your-app.com/home vs your-app.com/profile. This is used because by default React's Create React App (npx create-react-app) targets only one HTML file - index.html. You can customize this behavior as needed but may add complexity. |
| API Calls with Fetch & React | https://reactjs.org/docs/faq-ajax.html | |
| Global State Management | React Redux OR React's Context |
This is a slightly advanced topic but, might be helpful in your project - this helps provide your entire app with a share State so that every component can use data from a shared collection. Redux is slightly more complicated but, more established. Context API from React might be a better choice for smaller projects that need to be built quickly. |
Some general tips & links to help you kickstart your project
| Resource | Link | Comment |
|---|---|---|
| Firebase | https://firebase.google.com/ Hosting React with Firebase Firebase Web Project Setup |
Provides free hosting and Realtime NoSQL database for free (for small projects) |
| GitHub | https://github.com/ GitHub Desktop App |
You probably are already aware of Git, GitHub provides free public code hosting. Their desktop app is also helpful in removing complexity for first time Git users. |
| Visual Studio Code | https://code.visualstudio.com/ | Great editor with IDE capabilities, and great React / JSX support |
| Design Libraries | Ant Design Material UI |
Two very popular UI libraries to help you get started without having to deal with designing your components from scratch |