Create a simple react app based on Google Main page for show storybook funcionality
Create react based app with create-create-app
CLI
This project was bootstrapped with Create React App.
- Configure StoryBook
- Install dependecies
- Configure sotrybook file
- Create SearchBar component
- Create Logo Component
- Create Button Component
- Create Google Main Page
First step run npm i -g getstorybook
to install getstorybook
CLI and run yarn storybook
to run Stories App
Create file src/components/Search/index.js
import React from 'react';
import styled from 'styled-components';
const Search = () => <SearchInput />;
const SearchInput = styled.input`
outline: none;
padding: 8px 16px;
width: 480px;
border-radius: 16px;
border: none;
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
font-size: 16px;
`
export default Search;
Example
import React from 'react';
import { storiesOf } from '@storybook/react';
import Search from './index';
storiesOf('Search', module)
.add('Default', () => <Search />);
@todo
@todo
@todo
In the project directory, you can run:
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
Runs StoryBook.
Open http://localhost:9009 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.