React Academy One Day Workshop
Facilitator: Eric Cote
Date: Monday, October 15th 2018
Time: 8:00 AM - 5:00 PM
Location: DoubleTree by Hilton
Food: Breakfast & Lunch Included
What is React?
Who is the Workshop For?
What Equipment is Required?
Bring your laptop! An important part of the training is dedicated to building apps together and testing things in real time (bootcamp style). You can use Windows, Mac, or Linux as operating systems for the workshop.
What do I need to have installed?
Please ensure you have the below configured prior to the workshop:
- Permission to modify your laptop's wi-fi settings.
- Have local admin rights on your laptop. This is to install and update programming tools and configure the firewall for React Native.
- Have multiple browsers installed for testing (Chrome, Firefox, Edge, Opera, etc.)
- Have a code editor installed. The trainer will be using Visual Studio Code (which is free) but feel free to use Atom, WebStorm, Sublime, PHPStorm, etc. if you're more comfortable in those.
- Have Node.js version 8.12 or greater installed. Download Node.js
- Install and update create-react-app. To install:
- To install, enter > npm install -g create-react-app in your command line tool.
- To update, enter > npm update -g create-react-app in your command line tool.
- Create your first React app! On the command line, move to a folder that will store your web projects for the workshop (in the sample below we call the directory Demos)
- Navigate to the folder: > cd \Demos
- Create a test app: > create-react-app test-app
- Move to the new fodler: > cd test-app
- Start the web service and other dependencies (Webpack, Babel, etc.): > npm start
- If your browser doesn't open, open one and navigate to http://localhost:3000/. Once you see the webpage you've completed the setup!
If you run into any issues setting up your environment or have questions please don't hesitate to contact us: firstname.lastname@example.org
Introduction to React
- What is React? (previously known as ReactJS)
- Specs and pros
- React Hello World
JSX and Rendering
- React API
- SX Language
- Virtual DOM and Reconciliation
- Component types (Functional, Class)
- Property components (React Props)
- State Components (React State)
- Creation and Destruction of Components
- Lifecyle hooks (componentDidMount(), componentWillUnmount())
- How to use SetState()
- Controlled components
- Uncontrolled components