React Workshop

Session 1 (Initial app setup)

• Installing tools
  • Visual studio code
    • Debugger for chrome plugin
    • ESLint plugin
  • Node.js
  • Chrome plugin
    • React Developer Tools
  • Yarn (using npm i -g yarn)
• Bootstrapping React application with Create React App
  • taking a look of the generated files
    • package.json
      • dependencies
      • scripts
      • browserlist
• Adding dependencies
  • Twitter Bootstrap
  • node-sass
• Creating a page
  • adding layout based on Bootstrap Blog example
  • including bootstrap sass
  • creating and including css file
• Building the application using yarn build

Session 2 (video)

• adding VSCode plugin ES7 React/Redux/GraphQL/React-Native snippets for faster component creation

• updating the JSX to remove the ESLint warnings/errors by chaning

  • class property to className
  • href="#" to href="/"
  • tabindex to tabIndex

• Taking a look at JavaScript's data types and how are they rendered

  • string
  • number
  • undefined
  • null
  • boolean
  • function
  • class

• Naming convention

• Creating components

  Creating reuseable components to be used accross the Blog and simplify the App component

  ├── components
  │   ├── Footer.jsx
  │   ├── Header.jsx
  │   ├── Navigation.jsx
  │   ├── Pagination.jsx
  │   ├── Sidebar.jsx
  │   └── posts
  │       ├── Featured.jsx
  │       ├── Jumbotron.jsx
  │       └── Post.jsx
  └── pages
      └── Home.jsx
  

  • props
    • passing data to children
    • sending data to parents
    • children prop
  • state
  • lifecycle methods
  • hooks
  • React.Fragment

Session 3 (video)

• modifying the remaing components to render dynamic data
• Parsing markdown
  • adding markdown parser
  • creating <Markdown /> component inserting parsed markdown with dangerouslySetInnerHTML
• Formatting JavasScript Date
  • adding momnetjs to format dates
• React Router
  • creating simple page routing
    • / (home page)
      • /author/:authorId (posts by author)
      • /category/:categoryId (posts by category)
    • 404 (anyhting else)

Session 4 (video)

• Navigation
  • accepting dynamic categories
  • making array of unique values
• Category page
  • filtering posts to only display posts from the corresponding category
• Adding /edit page
  • creating textarea and live preview
• API client using Axios
  • Adding http-proxy-middleware (proxying localhost API requests to avoid CORS errors)
  • fetching posts data from the API

Upcoming sessions

• crating a post page
• creating author page
• fetching/posting data using to the API (API source code)
• React Redux

Initial React Scripts