Intro to React

This course will help you understand React JS and how to develop an App using this awesome library, during the course you will be learning the following React concepts:

• One-way data flow
• Virtual DOM
• JSX
• Components
• Render method
• Props
• State
• Event handlers
• Conditional rendering
• Forms
• PropTypes
• Lifecycle methods
• Stateless and Stateful components
• Nested components
• High order components (HOC)
• Implementing third party controls
• Redux
• Jest Unit Testing

Repository Structure

This repository includes the following information:

• App mockups
• Session 1 presentation
• Session 2 presentation

And project folders for each development stage of the App:

1. Boilderplate project: Starter project
2. React only project: Project using React and React-Router without Redux
3. React-Redux project: Project using React-Redux to manage better the data flow of the App
4. Jest Unit Testing project: Project using Jest unit testing.
5. Final version project: Final version of the project with Authentication and Data stored on Firebase.

Getting Started

Fork or clone this repo, then run below commands:

cd 01.photo-album-boilerplate
npm install
npm start

Photo Album App

This app was built using:

• create-react-app: To start working with React with no build configuration
• semantic-ui-react: To improve the UI of the app using semantic components and styles
• react-images: To add lightbox functionality for displaying images
• react-router: To manage the routing of the app
• react-redux: To manage the data flow of the app

Demo

References

• React Docs